import { Meta } from "@storybook/addon-docs";
import { Tabs } from "./index.tsx";

<Meta title="RUI" />

# RUI

RUI 是一套基于 React / TypeScript 实现的 UI 组件库，主要组件有导航菜单、自动完成、上传等。<br/>
文档页面使用 Storybook 制作而成，可快速修改属性并实时看到变化。<br/>

- 使用 Jest 以及 React Testing Library 实现单测覆盖率大于 90%。
- 使用第三方库（react-fontawesome, react-transition-group）扩充组件，提供图标库及实现过渡动画效果。
- 使用 SASS 预处理 CSS，通过其变量、mixin、嵌套等功能，提高 CSS 代码的可维护性。
- 使用 GitHub Actions 完成 CI/CD 以及自动发布至 npm。

[预览地址](https://yilunyuwan.gitee.io/rui-react/) &emsp;[源码链接](https://gitee.com/yilunyuwan/rui-react) &emsp;[项目笔记](https://gitee.com/yilunyuwan/rui-react/wikis/pages)
<br />

# 快速开始

<br />

## 安装

RUI 已发布至 npm，您可使用 npm 或 yarn 来安装
<Tabs>
    <Tabs.Item label="npm">
      <code>$ npm install rui-react</code>
    </Tabs.Item>
    <Tabs.Item label="yarn">
      <code>$ yarn add rui-react</code>
    </Tabs.Item>
</Tabs>
<br/>

## 使用示例

### 1. 引入样式

在项目的入口文件（如`index.tsx`）中引入样式

```js
import "rui-react/dist/index.css";
```

### 2. 使用组件

```js
import React from "react";
import { Button } from "rui-react";

const App = () => {
  return <Button>默认按钮</Button>;
};

export default App;
```

## 组件
- 基础：[按钮 Button](?path=/docs/基础-按钮-button--default-button), [图标 Icon](?path=/docs/基础-图标-icon--default-icons)
- 表单：[输入框 Input](?path=/docs/表单-输入框-input--default-input), [自动提示 AutoComplete](?path=/docs/表单-自动提示-autocomplete--default-auto-complete), [上传 Upload](?path=/docs/表单-上传-upload--click-upload)
- 导航：[菜单 Menu](?path=/docs/导航-菜单-menu--default-menu), [标签页 Tabs](?path=/docs/导航-标签页-tabs--default-tabs)
- 视图：[警告 Alert](?path=/docs/视图-警告-alert--default-alert), [进度条 Progress](?path=/docs/视图-进度条-progress--default-progress)